Have you visited the Yahoo Finance page recently? The 'tabs' is just a fancy looking horizontal DROP-DOWN menu.
As usual, Neilsen make a meal of it and comes up with a poor example.
Tabs are one of the most frequently used navigation design solutions for many web pages needing to provide access to a lot of different content modules. Tabs, like in real life, are similar to an always-on minimalist menu, one that allows easy switching to a different view or to an alternate data set, in just one click.
But just like any other interface design component, tabs require lots of detailed design attention to be really effective.
In particular, understanding their nature and use, as well as the typical mistakes done by other web sites and designers, can help a great deal in understanding the major risks one runs into when wanting to adopt tabs inside its navigation design strategy.
Jakob Nielsen, world renowned usability guru, provides here a rich set of guidelines to follow when designing tabbed navigation that wants to be both effective and usable. He focuses on showcasing real-life examples that match all of his requirements while showing also the typical limitations and obstacles that such solutions often run against.
Here his detailed guide to designing highly usable and effective navigation tabs.
Intro by Robin Good
by Jakob Nielsen
Summary:
13 design guidelines for tab controls are all followed by Yahoo Finance, but usability suffers due to AJAX overkill and difficult customization.
Tabbed controls from the upper left and middle right of the Yahoo Finance homepage.
It's a rare pleasure to come across a user interface on the Web that uses dialog controls correctly. Even something as simple as radio buttons and checkboxes are incorrectly used half the time. And let's not even get started on drop-down menus, which are horribly abused, or the homemade scrollbars that deface most Flash sites.
Yahoo Finance recently launched a redesigned homepage that uses tabs correctly, as shown in the following tabbed areas from two different parts of the page:
Top navigation bar for Yahoo Finance's homepage.
This design follows all 13 guidelines for tabs:
While the tabs in the main body of the page are used correctly, the tabs in the global navigation bar at the top of the page are not:
Tabs should be reserved for letting users change the view while staying in the same place. Also, the little triangle beneath each label represents a pull-down menu, which is a highly non-standard widget to integrate with tabs.
Yahoo Finance generally complies with a higher-level guideline: be consistent. The page contains three different areas with tabs, and they all look and work the same (except for the global navbar, as lamented above).
Sadly, there's a fourth tab control further down the page; here, the tabs are a different color. Mainly, though, this deviant tab control looks about the same as the other three, so it shouldn't cause major usability problems. In any case, it's so far down that page that many users won't scroll down to see it.
Consistency is important in GUI control design because it builds the user's feeling of mastery over the interface in several ways:
It's good when a tab click takes effect immediately, changing the panel area without a full page reload. But not all within-the-page updates are good.
On the Yahoo Finance page, stock quotes are updated in real time and each change is announced by a color flashing behind the affected number. The constant flashing all over the screen gets tiring fast, especially for numbers like volume, which change incessantly.
Just because you can do something doesn't mean that you should. Yes, it is a guideline to draw users' attention to updates within a page, but only when users need to be alerted. In this case, all users need to know is that all numbers are current and will be continually updated.
A trading system for day traders would be a different matter. In that scenario, users need to continuously monitor market trends for multiple securities, and colors flickering in their peripheral vision could alert them to short-lived trading opportunities.
On a financial portal homepage, however, users have to scan a broad set of headlines and stories. If they want to trade, they go to their broker's site, so they couldn't take advantage of anything that required trigger-fast actions anyway. Few people would sit and stare at this page to keep up with second-by-second changes; the relentless blinking is overkill and distracts users from the content they came for.
Customization options for part of the Yahoo Finance page.
Yahoo Finance lets users customize the Market Summary tabs to show their preferred set of indices. Unfortunately, the personalization screen is overly difficult:
A chart accompanies the first item in the bulleted list, but this fact isn't obvious. If users want to change the default chart, they must infer that they have to change the element order on the quotes list. At minimum, the instructions should explain this. Better yet, the page should offer a set of radio buttons next to the index symbols and have the selected radio button determine which symbol is charted.
Also, investment experts know the ticker symbols for the indices they want to track, but they'll stick to their Bloomberg terminals. Most Yahoo Finance users will have no clue about what to type into this form. It's thus good that the page provides a link to the symbol lookup feature (just-in-time help). However, given that this page has few other features, it would have been better to just list the 30 or so most common symbols right on the page. Users could then select a symbol by clicking it, rather than having to type it (which is more error-prone).
(It's good that this customization interface is offered on a separate page instead of being squeezed into an AJAX-style overlay on the main page. Sometimes usability benefits from focusing users' attention on the matter at hand and allowing the necessary room for helpful features.)
I chose to customize this page because it shows the Dow index as the default. Every investment book I've ever read says that the S&P 500 is a better indicator for the U.S. stock market, so that's obviously the one I wanted to see. (In the interest of overly full disclosure, S&P has been one of our consulting clients, but that's not why I prefer their index. I prefer it because averaging 500 stocks gives a broader picture than averaging 30 stocks.)
Perhaps Yahoo should have used the S&P 500 as the default chart from the beginning, freeing me from having to enter the customization screen. However, while the S&P 500 is theoretically better, most press coverage centers on the Dow, so most novice investors likely understand it better.
Ethnographic research could tell us more about how people think about investing and stock indices, and it's quite possible that Yahoo did the research and had good reasons for picking the Dow. I haven't researched this particular question (our studies of investors focus on their use of the investor relations (IR) sections of corporate websites), but my guess is that Yahoo did the right thing and most users do prefer to see the Dow as their default.
While Yahoo's customization has its usability problems, the page does make good use of personalization, which is difficult to do. (The article I wrote on problems with personalization 9 years ago still holds true. The very fact that personalization improves so slowly is one reason to be skeptical about any new claims for sudden improvements in personalization technology.)
Among the page's personalized features is a list (not shown here) of current quotes for the last several stocks the user looked up. Recent interest is a good proxy for current interest, and it's very likely that users still care about the quotes for those recently checked stocks.
While the new homepage design for Yahoo Finance has its weak spots, it's mainly excellent. I'm particularly pleased to see such a correct and effective use of tabs (global navigation aside).
Original article by Jakob Nielsen first published on September 17th, 2007 as "Tabs, Used Right" on Useit.com.
About the author
Jakob Nielsen, Ph.D., is a User Advocate and principal of the Nielsen Norman Group which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer). Until 1998 he was a Sun Microsystems Distinguished Engineer. Dr. Nielsen founded the "discount usability engineering" movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation.
More pragmatic usability advice is covered in his full-day tutorials on the Page-Level Building Blocks for Application Usability and on Dialogue and Workflow Design at the User Experience 2007 conference in Las Vegas and Barcelona.
Jakob Nielsen -2007-10-12 03:23:24 |
Have you visited the Yahoo Finance page recently? The 'tabs' is just a fancy looking horizontal DROP-DOWN menu.
As usual, Neilsen make a meal of it and comes up with a poor example.